<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#fff"
      text-color="#000"
      active-text-color="#409EFF"
    >
      <el-menu-item index="1">我的收藏</el-menu-item>
      <el-menu-item index="2">我的上传</el-menu-item>
      <el-menu-item index="3">我的下载</el-menu-item>
      <el-menu-item index="4">个人中心</el-menu-item>
    </el-menu>
    <div class="padding">
      <div v-if="activeIndex == '1'"><myCollect></myCollect></div>
      <div v-if="activeIndex == '2'">
        <myUpload></myUpload>
      </div>
      <div v-if="activeIndex == '3'">
        <myDownload></myDownload>
      </div>
      <div v-if="activeIndex == '4'">
        <myInfo></myInfo>
      </div>
    </div>
  </div>
</template>

<script>
import myUpload from "@/views/managementCenter/personCenter/myUpload";
import myDownload from "@/views/managementCenter/personCenter/myDownload";
import myInfo from "@/views/managementCenter/personCenter/myInfo";
import myCollect from "@/views/managementCenter/personCenter/myCollect";
export default {
  name: "notFound",
  components: {
    myUpload,
    myDownload,
    myInfo,
    myCollect,
  },
  data() {
    return {
      activeIndex: "1",
    };
  },
  created() {
    try {
      var url = window.location.href;
      var urlSplit = url.split("?");
      var actUrl = urlSplit[1].replace("token=", "");
      if (actUrl) {
        actUrl = unescape(actUrl);
        localStorage.setItem("token", actUrl);
      }
      console.log(actUrl, "code");
    } catch (error) {
      console.log(error);
    }
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
    },
  },
};
</script>

<style scoped>
.padding {
  padding: 10px;
}
.el-menu--horizontal > .el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}
</style>